<template><div><p>本文档最新版为 <a href="https://learnku.com/docs/laravel/10.x" target="_blank" rel="noopener noreferrer">10.x</a>，旧版本可能放弃维护，推荐阅读最新版！</p>
<h2 id="blade-templates" tabindex="-1"><a class="header-anchor" href="#blade-templates"><span>Blade Templates</span></a></h2>
<ul>
<li><a href="#introduction">简介</a></li>
<li><a href="#template-inheritance">模板继承</a>
<ul>
<li><a href="#defining-a-layout">定义布局</a></li>
<li><a href="#extending-a-layout">继承布局</a></li>
</ul>
</li>
<li><a href="#components-and-slots">组件 &amp; 插槽</a></li>
<li><a href="#displaying-data">显示数据</a>
<ul>
<li><a href="#blade-and-javascript-frameworks">Blade &amp; JavaScript 框架</a></li>
</ul>
</li>
<li><a href="#control-structures">流程控制</a>
<ul>
<li><a href="#if-statements">If 语句</a></li>
<li><a href="#switch-statements">Switch 语句</a></li>
<li><a href="#loops">循环</a></li>
<li><a href="#the-loop-variable">循环变量</a></li>
<li><a href="#comments">注释</a></li>
<li><a href="#php">PHP</a></li>
</ul>
</li>
<li><a href="#forms">表单</a>
<ul>
<li><a href="#csrf-field">CSRF 字段</a></li>
<li><a href="#method-field">Method 字段</a></li>
<li><a href="#validation-errors">验证错误</a></li>
</ul>
</li>
<li><a href="#including-sub-views">引入子视图</a>
<ul>
<li><a href="#rendering-views-for-collections">为集合渲染视图</a></li>
</ul>
</li>
<li><a href="#stacks">堆栈</a></li>
<li><a href="#service-injection">服务注入</a></li>
<li><a href="#extending-blade">Blade 扩展</a>
<ul>
<li><a href="#custom-if-statements">自定义 If 语句</a></li>
</ul>
</li>
</ul>
<h2 id="简介" tabindex="-1"><a class="header-anchor" href="#简介"><span>简介</span></a></h2>
<p>Blade 是 Laravel 提供的一个简单而又强大的模板引擎。和其他流行的 PHP 模板引擎不同，Blade 并不限制你在视图中使用原生 PHP 代码。所有 Blade 视图文件都将被编译成原生的 PHP 代码并缓存起来，除非它被修改，否则不会重新编译，这就意味着 Blade 基本上不会给你的应用增加任何负担。Blade 视图文件使用 <code v-pre>.blade.php</code>作为文件扩展名，被存放在 <code v-pre>resources/views</code> 目录。</p>
<h2 id="模板继承" tabindex="-1"><a class="header-anchor" href="#模板继承"><span>模板继承</span></a></h2>
<h3 id="定义布局" tabindex="-1"><a class="header-anchor" href="#定义布局"><span>定义布局</span></a></h3>
<p>Blade 的两个主要优点是 <code v-pre>模板继承</code>和<code v-pre>区块</code>。为方便入门，让我们先通过一个简单的例子来上手。首先，我们来研究一个「主」页面布局。因为大多数 web 应用会在不同的页面中使用相同的布局方式，因此可以很方便地定义单个 Blade 布局视图：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 保存在 resources<span class="token operator">/</span>views<span class="token operator">/</span>layouts<span class="token operator">/</span>app<span class="token operator">.</span>blade<span class="token operator">.</span>php 文件中 <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>html<span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>head<span class="token operator">></span></span>
<span class="line">        <span class="token operator">&lt;</span>title<span class="token operator">></span>App Name <span class="token operator">-</span> @<span class="token keyword">yield</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>body<span class="token operator">></span></span>
<span class="line">        @<span class="token function">section</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'sidebar'</span><span class="token punctuation">)</span></span>
<span class="line">            This is the master sidebar<span class="token operator">.</span></span>
<span class="line">        @show</span>
<span class="line"></span>
<span class="line">        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"container"</span><span class="token operator">></span></span>
<span class="line">            @<span class="token keyword">yield</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如你所见，该文件包含了典型的 HTML 语法。不过，请注意 <code v-pre>@section</code> 和 <code v-pre>@yield</code> 指令。 <code v-pre>@section</code> 指令定义了视图的一部分内容，而 <code v-pre>@yield</code> 指令是用来显示指定部分的内容。</p>
<p>现在，我们已经定义好了这个应用程序的布局，接下来，我们定义一个继承此布局的子页面。</p>
<h3 id="扩展布局" tabindex="-1"><a class="header-anchor" href="#扩展布局"><span>扩展布局</span></a></h3>
<p>在定义一个子视图时，使用 Blade 的 <code v-pre>@extends</code> 指令指定子视图要「继承」的视图。扩展自 Blade 布局的视图可以使用 <code v-pre>@section</code> 指令向布局片段注入内容。就如前面的示例中所示，这些片段的内容将由布局中的 <code v-pre>@yield</code> 指令控制显示：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 保存在 resources<span class="token operator">/</span>views<span class="token operator">/</span>child<span class="token operator">.</span>blade<span class="token operator">.</span>php 文件中 <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line"></span>
<span class="line">@<span class="token keyword">extends</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'layouts.app'</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">@<span class="token function">section</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Page Title'</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">@<span class="token function">section</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'sidebar'</span><span class="token punctuation">)</span></span>
<span class="line">    @<span class="token keyword">parent</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">&lt;</span>p<span class="token operator">></span>This is appended to the master sidebar<span class="token operator">.</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span></span>
<span class="line">@endsection</span>
<span class="line"></span>
<span class="line">@<span class="token function">section</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>p<span class="token operator">></span>This is my body content<span class="token operator">.</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span></span>
<span class="line">@endsection</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在这个示例中， <code v-pre>sidebar</code> 片段利用 <code v-pre>@parent</code> 指令向布局的 sidebar 追加（而非覆盖）内容。 在渲染视图时，<code v-pre>@parent</code> 指令将被布局中的内容替换。</p>
<blockquote>
<p>Tip：和上一个示例相反，这里的 <code v-pre>sidebar</code> 片段使用 <code v-pre>@endsection</code> 代替 <code v-pre>@show</code> 来结尾。 <code v-pre>@endsection</code> 指令仅定义了一个片段， <code v-pre>@show</code> 则在定义的同时 <strong>立即 yield</strong> 这个片段。</p>
</blockquote>
<p><code v-pre>@yield</code> 指令还接受一个默认值作为第二个参数。如果被 「yield」的片段未定义，则该默认值被渲染：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">yield</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">,</span> <span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'view.name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>Blade 视图可以使用全局 <code v-pre>view</code> 助手自路由中返回：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Route</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'blade'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'child'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="组件-插槽" tabindex="-1"><a class="header-anchor" href="#组件-插槽"><span>组件 &amp; 插槽</span></a></h2>
<p>组件和插槽提供了与片段和布局类似的好处；不过组件和插槽的思维模型更易于理解。我们先来看一个可复用的「alert」组件，我们想在应用中复用它：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">/</span>resources<span class="token operator">/</span>views<span class="token operator">/</span>alert<span class="token operator">.</span>blade<span class="token operator">.</span>php <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"alert alert-danger"</span><span class="token operator">></span></span>
<span class="line">    <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$slot</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>{{ $slot }}</code> 变量将包含我们想要注入到组件的内容。现在，我们使用 Blade 的 <code v-pre>@component</code> 指令构建这个组件：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">component</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'alert'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>strong<span class="token operator">></span>Whoops<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>strong<span class="token operator">></span> Something went wrong<span class="token operator">!</span></span>
<span class="line">@endcomponent</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>若要指示Laravel从组件的给定数组中加载存在的第一个视图, 可以使用 <code v-pre>componentFirst</code> 指令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">componentFirst</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'custom.alert'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'alert'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>strong<span class="token operator">></span>Whoops<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>strong<span class="token operator">></span> Something went wrong<span class="token operator">!</span></span>
<span class="line">@endcomponent</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>有时候为一个组件定义多个插槽是很有用的。修改 alert 组件以允许其注入 「title」。命名插槽可以通过与其匹配的 「回显」 变量显示：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">/</span>resources<span class="token operator">/</span>views<span class="token operator">/</span>alert<span class="token operator">.</span>blade<span class="token operator">.</span>php <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"alert alert-danger"</span><span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"alert-title"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$title</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"></span>
<span class="line">    <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$slot</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>现在，我们能够使用 <code v-pre>@slot</code> 指令向命名插槽注入内容。不在 <code v-pre>@slot</code> 指令内的内容都将传递给组件中的 <code v-pre>$slot</code> 变量：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">component</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'alert'</span><span class="token punctuation">)</span></span>
<span class="line">    @<span class="token function">slot</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span></span>
<span class="line">        Forbidden</span>
<span class="line">    @endslot</span>
<span class="line"></span>
<span class="line">    You are not allowed to access this resource<span class="token operator">!</span></span>
<span class="line">@endcomponent</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="向组件传递额外的数据" tabindex="-1"><a class="header-anchor" href="#向组件传递额外的数据"><span>向组件传递额外的数据</span></a></h4>
<p>有时你可能需要向组件传递额外的数据。在这种情况下，可以把包含数据组织成数组，作为 <code v-pre>@component</code> 指令的第二个参数。所有的数据将作为变更提供给组件模板：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">component</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'alert'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'foo'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'bar'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line">@endcomponent</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="给组件起别名" tabindex="-1"><a class="header-anchor" href="#给组件起别名"><span>给组件起别名</span></a></h4>
<p>如果组件存储在子目录中，你可能希望给它们起个别名以方便访问。举例来说，如果一个 Blade 组件存储在 <code v-pre>resources/views/components/alert.blade.php</code>中，. 就可以使用 <code v-pre>component</code> 方法将 <code v-pre>components.alert</code> 的别名命名为 <code v-pre>alert</code>。 通常情况下，这一过程将在 <code v-pre>AppServiceProvider</code> 的 <code v-pre>boot</code> 方法中完成：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'components.alert'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'alert'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>一旦组件有了别名，就可以使用一条指令渲染它：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">alert</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'type'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'danger'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    You are not allowed to access this resource<span class="token operator">!</span></span>
<span class="line">@endalert</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果没有额外的插槽，还可以省略组件参数：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@alert</span>
<span class="line">    You are not allowed to access this resource<span class="token operator">!</span></span>
<span class="line">@endalert</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="显示数据" tabindex="-1"><a class="header-anchor" href="#显示数据"><span>显示数据</span></a></h2>
<p>可以通过包裹在双花括号内的变量显示传递给 Blade 视图的数据。比如给出如下路由：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Route</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'greeting'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'welcome'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Samantha'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>就可以这样利用 <code v-pre>name</code> 变量显示其内容：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">Hello<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$name</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">.</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>Tip：Blade <code v-pre>{{ }}</code> 语句是自动经过 PHP 的 <code v-pre>htmlspecialchars</code>函数传递来防范 XSS 攻击的。</p>
</blockquote>
<p>不限于显示传递给视图的变量的内容，你还可以显示任一 PHP 函数的结果。实际上，你可以在Blade 的回显语句中放置你想要的任意 PHP 代码：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">The current <span class="token constant">UNIX</span> timestamp is <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token function">time</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">.</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="显示非转义字符" tabindex="-1"><a class="header-anchor" href="#显示非转义字符"><span>显示非转义字符</span></a></h4>
<p>默认情况下， Blade 中 <code v-pre>{{ }}</code> 语句自动经由 PHP 的 <code v-pre>htmlspecialchars</code>函数传递以防范 XSS 攻击。如果不希望数据被转义，可以使用下面的语法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">Hello<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span> <span class="token variable">$name</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token punctuation">}</span><span class="token operator">.</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>注意：在回显应用的用户提供的内容时需要谨慎小心。在显示用户提供的数据时，有必要一直使用双花括号语法转义来防范 XSS 攻击。</p>
</blockquote>
<h4 id="渲染-json" tabindex="-1"><a class="header-anchor" href="#渲染-json"><span>渲染 JSON</span></a></h4>
<p>有时，为了初始化一个JavaScript变量，你可能会向视图传递一个数组，并将其渲染成JSON。例如:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line">    <span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token keyword">echo</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token variable">$array</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span><span class="token punctuation">;</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然而，你需要使用<code v-pre>@json</code>Blade指令，而不是手动调用 <code v-pre>json_encode</code>。<code v-pre>@json</code> 指令和PHP的<code v-pre>json_encode</code>函数具有相同的参数。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>script<span class="token operator">></span></span>
<span class="line">    <span class="token keyword">var</span> app <span class="token operator">=</span> @<span class="token function">json</span><span class="token punctuation">(</span><span class="token variable">$array</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">var</span> app <span class="token operator">=</span> @<span class="token function">json</span><span class="token punctuation">(</span><span class="token variable">$array</span><span class="token punctuation">,</span> <span class="token constant">JSON_PRETTY_PRINT</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>{注意} 你应该只使用<code v-pre>@json</code>指令去将现有的变量渲染为JSON。Blade模板基于正则表达式，并且尝试将复杂表达式传递给指令这可能会导致意外故障。</p>
</blockquote>
<p><code v-pre>@json</code> 指令还可用于植入Vue组件或 <code v-pre>data-*</code>属性：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>example<span class="token operator">-</span>component <span class="token punctuation">:</span>some<span class="token operator">-</span>prop<span class="token operator">=</span><span class="token string single-quoted-string">'@json($array)'</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>example<span class="token operator">-</span>component<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>{注意} 在元素属性中使用<code v-pre>@json</code>需要用单引号括起来。</p>
</blockquote>
<h4 id="html-实体编码" tabindex="-1"><a class="header-anchor" href="#html-实体编码"><span>HTML 实体编码</span></a></h4>
<p>默认情况下，Blade（和Laravel的 <code v-pre>e</code>助手函数）将对HTML实体进行双重编码。<br>
如果你想要禁用双重编码，请从<code v-pre>AppServiceProvider</code>的 <code v-pre>boot</code>方法中调用<code v-pre>Blade::withoutDoubleEncoding</code>方法。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Providers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>ServiceProvider</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">AppServiceProvider</span> <span class="token keyword">extends</span> <span class="token class-name">ServiceProvider</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * Bootstrap any application services.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">withoutDoubleEncoding</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="blade-javascript-框架" tabindex="-1"><a class="header-anchor" href="#blade-javascript-框架"><span>Blade &amp; JavaScript 框架</span></a></h3>
<p>由于许多 JavaScript 框架也使用“大括号”来表示预设的表达式应该显示在浏览器中，因此可以使用 <code v-pre>@</code> 符号通知Blade渲染引擎表达式应保持不变。例如：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>h1<span class="token operator">></span>Laravel<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span></span>
<span class="line"></span>
<span class="line">Hello<span class="token punctuation">,</span> @<span class="token punctuation">{</span><span class="token punctuation">{</span> name <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">.</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在这个例子中， <code v-pre>@</code> 符号将被 Blade 删除；然而，在 Blade 引擎中 <code v-pre>{{ name }}</code> 表达式将保持不变，取而代之的是 JavaScript 引擎来渲染该表达式。</p>
<h4 id="verbatim-指令" tabindex="-1"><a class="header-anchor" href="#verbatim-指令"><span><code v-pre>@verbatim</code> 指令</span></a></h4>
<p>如果你在模板中显示了很大一部分的JavaScript变量，可以将HTML套嵌在<code v-pre>@verbatim</code>指令中，这样就不必在每个Blade 回显语句前面加上<code v-pre>@</code> 符号了：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@verbatim</span>
<span class="line">    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"container"</span><span class="token operator">></span></span>
<span class="line">        Hello<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> name <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">.</span></span>
<span class="line">    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line">@endverbatim</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="控制结构" tabindex="-1"><a class="header-anchor" href="#控制结构"><span>控制结构</span></a></h2>
<p>除了模板继承和显示数据之外，Blade还为常见的PHP控制结构提供了便捷的快捷方式，例如条件和循环语句。这些快捷方式提供了一种简洁的处理PHP控制语句的方法，同时保持了与PHP中的相应结构的相似性。</p>
<h3 id="if-语句" tabindex="-1"><a class="header-anchor" href="#if-语句"><span>If 语句</span></a></h3>
<p>你可以使用<code v-pre>@if</code>、<code v-pre>@elseif</code>、<code v-pre>@else</code>和<code v-pre>@endif</code>指令来构造 <code v-pre>if</code>语句。这些指令的功能与它们在PHP中对应的语句功能相同：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token variable">$records</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token constant">I</span> have one record<span class="token operator">!</span></span>
<span class="line">@<span class="token keyword">elseif</span> <span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token variable">$records</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token constant">I</span> have multiple records<span class="token operator">!</span></span>
<span class="line">@<span class="token keyword">else</span></span>
<span class="line">    <span class="token constant">I</span> don't have any records<span class="token operator">!</span></span>
<span class="line">@<span class="token keyword">endif</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>为了方便，Blade也提供了一个<code v-pre>@unless</code>指令</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">unless</span> <span class="token punctuation">(</span><span class="token class-name static-context">Auth</span><span class="token operator">::</span><span class="token function">check</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">    You are not signed in<span class="token operator">.</span></span>
<span class="line">@endunless</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>除了已经讨论过的条件指令之外， <code v-pre>@isset</code>和<code v-pre>@empty</code> 指令还可以用作各自PHP函数的快捷方式：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">isset</span><span class="token punctuation">(</span><span class="token variable">$records</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token comment">// $records is defined and is not null...</span></span>
<span class="line">@endisset</span>
<span class="line"></span>
<span class="line">@<span class="token keyword">empty</span><span class="token punctuation">(</span><span class="token variable">$records</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token comment">// $records is "empty"...</span></span>
<span class="line">@endempty</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="身份验证指令" tabindex="-1"><a class="header-anchor" href="#身份验证指令"><span>身份验证指令</span></a></h4>
<p><code v-pre>@auth</code>和<code v-pre>@guest</code> 指令可用于快速确定当前用户是否经过身份验证或是guest:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@auth</span>
<span class="line">    <span class="token comment">// The user is authenticated...</span></span>
<span class="line">@endauth</span>
<span class="line"></span>
<span class="line">@guest</span>
<span class="line">    <span class="token comment">// The user is not authenticated...</span></span>
<span class="line">@endguest</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果需要，可以在使用 <code v-pre>@auth</code> 和 <code v-pre>@guest</code> 指令时指定应被校验的 <a href="https://learnku.com/docs/laravel/6.x/authentication" target="_blank" rel="noopener noreferrer">身份验证</a> ：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">auth</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token comment">// The user is authenticated...</span></span>
<span class="line">@endauth</span>
<span class="line"></span>
<span class="line">@<span class="token function">guest</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token comment">// The user is not authenticated...</span></span>
<span class="line">@endguest</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="片段指令" tabindex="-1"><a class="header-anchor" href="#片段指令"><span>片段指令</span></a></h4>
<p>你可以使用 <code v-pre>@hasSection</code> 指令检查片段是否包含指定内容：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">hasSection</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'navigation'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"pull-right"</span><span class="token operator">></span></span>
<span class="line">        @<span class="token keyword">yield</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'navigation'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"clearfix"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line">@<span class="token keyword">endif</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="switch-语句" tabindex="-1"><a class="header-anchor" href="#switch-语句"><span>Switch 语句</span></a></h3>
<p>Switch语句可以使用<code v-pre>@switch</code>, <code v-pre>@case</code>, <code v-pre>@break</code>, <code v-pre>@default</code>和<code v-pre>@endswitch</code>指令来构造：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">switch</span><span class="token punctuation">(</span><span class="token variable">$i</span><span class="token punctuation">)</span></span>
<span class="line">    @<span class="token keyword">case</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span></span>
<span class="line">        First <span class="token keyword">case</span><span class="token operator">...</span></span>
<span class="line">        @<span class="token keyword">break</span></span>
<span class="line"></span>
<span class="line">    @<span class="token keyword">case</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span></span>
<span class="line">        Second <span class="token keyword">case</span><span class="token operator">...</span></span>
<span class="line">        @<span class="token keyword">break</span></span>
<span class="line"></span>
<span class="line">    @<span class="token keyword">default</span></span>
<span class="line">        <span class="token keyword">Default</span> <span class="token keyword">case</span><span class="token operator">...</span></span>
<span class="line">@<span class="token keyword">endswitch</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="循环" tabindex="-1"><a class="header-anchor" href="#循环"><span>循环</span></a></h3>
<p>除了条件语句之外，Blade还提供了使用PHP循环结构的简单指令。同样，这些指令的每个函数都与它们相对于的PHP函数相同：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token variable">$i</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token variable">$i</span> <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> <span class="token variable">$i</span><span class="token operator">++</span><span class="token punctuation">)</span></span>
<span class="line">    The current value is <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$i</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line">@<span class="token keyword">endfor</span></span>
<span class="line"></span>
<span class="line">@<span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$users</span> <span class="token keyword">as</span> <span class="token variable">$user</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>p<span class="token operator">></span>This is user <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$user</span><span class="token operator">-></span><span class="token property">id</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span></span>
<span class="line">@<span class="token keyword">endforeach</span></span>
<span class="line"></span>
<span class="line">@<span class="token function">forelse</span> <span class="token punctuation">(</span><span class="token variable">$users</span> <span class="token keyword">as</span> <span class="token variable">$user</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>li<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$user</span><span class="token operator">-></span><span class="token property">name</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span></span>
<span class="line">@<span class="token keyword">empty</span></span>
<span class="line">    <span class="token operator">&lt;</span>p<span class="token operator">></span>No users<span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span></span>
<span class="line">@endforelse</span>
<span class="line"></span>
<span class="line">@<span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token constant boolean">true</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>p<span class="token operator">></span><span class="token constant">I</span>'m looping forever<span class="token operator">.</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span></span>
<span class="line">@<span class="token keyword">endwhile</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>{提示} 循环时，你可以使用 <a href="#the-loop-variable">循环遍历</a> 来获取循环中的有关信息，例如你是否在循环的第一次或最后一次迭代中。</p>
</blockquote>
<p>使用循环时，也可以结束循环或跳过当前迭代：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$users</span> <span class="token keyword">as</span> <span class="token variable">$user</span><span class="token punctuation">)</span></span>
<span class="line">    @<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$user</span><span class="token operator">-></span><span class="token property">type</span> <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span></span>
<span class="line">        @<span class="token keyword">continue</span></span>
<span class="line">    @<span class="token keyword">endif</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">&lt;</span>li<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$user</span><span class="token operator">-></span><span class="token property">name</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span></span>
<span class="line"></span>
<span class="line">    @<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$user</span><span class="token operator">-></span><span class="token property">number</span> <span class="token operator">==</span> <span class="token number">5</span><span class="token punctuation">)</span></span>
<span class="line">        @<span class="token keyword">break</span></span>
<span class="line">    @<span class="token keyword">endif</span></span>
<span class="line">@<span class="token keyword">endforeach</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你也可以在一行中声明带有条件的指令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$users</span> <span class="token keyword">as</span> <span class="token variable">$user</span><span class="token punctuation">)</span></span>
<span class="line">    @<span class="token keyword">continue</span><span class="token punctuation">(</span><span class="token variable">$user</span><span class="token operator">-></span><span class="token property">type</span> <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">&lt;</span>li<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$user</span><span class="token operator">-></span><span class="token property">name</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span></span>
<span class="line"></span>
<span class="line">    @<span class="token keyword">break</span><span class="token punctuation">(</span><span class="token variable">$user</span><span class="token operator">-></span><span class="token property">number</span> <span class="token operator">==</span> <span class="token number">5</span><span class="token punctuation">)</span></span>
<span class="line">@<span class="token keyword">endforeach</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="循环变量" tabindex="-1"><a class="header-anchor" href="#循环变量"><span>循环变量</span></a></h3>
<p>循环过程中，在循环体内有一个可用的 <code v-pre>$loop</code> 变量。该变量提供了用于访问诸如当前循环的索引、当前是否为第一次或最后一次循环之类的少数有用的信息的途径：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$users</span> <span class="token keyword">as</span> <span class="token variable">$user</span><span class="token punctuation">)</span></span>
<span class="line">    @<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$loop</span><span class="token operator">-></span><span class="token property">first</span><span class="token punctuation">)</span></span>
<span class="line">        This is the first iteration<span class="token operator">.</span></span>
<span class="line">    @<span class="token keyword">endif</span></span>
<span class="line"></span>
<span class="line">    @<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$loop</span><span class="token operator">-></span><span class="token property">last</span><span class="token punctuation">)</span></span>
<span class="line">        This is the last iteration<span class="token operator">.</span></span>
<span class="line">    @<span class="token keyword">endif</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">&lt;</span>p<span class="token operator">></span>This is user <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$user</span><span class="token operator">-></span><span class="token property">id</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span></span>
<span class="line">@<span class="token keyword">endforeach</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在嵌套循环中，可以借助 <code v-pre>parent</code> 属性访问父循环的 <code v-pre>$loop</code> 变量：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$users</span> <span class="token keyword">as</span> <span class="token variable">$user</span><span class="token punctuation">)</span></span>
<span class="line">    @<span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$user</span><span class="token operator">-></span><span class="token property">posts</span> <span class="token keyword">as</span> <span class="token variable">$post</span><span class="token punctuation">)</span></span>
<span class="line">        @<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$loop</span><span class="token operator">-></span><span class="token property">parent</span><span class="token operator">-></span><span class="token property">first</span><span class="token punctuation">)</span></span>
<span class="line">            This is first iteration of the <span class="token keyword">parent</span> loop<span class="token operator">.</span></span>
<span class="line">        @<span class="token keyword">endif</span></span>
<span class="line">    @<span class="token keyword">endforeach</span></span>
<span class="line">@<span class="token keyword">endforeach</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>$loop</code> 变量还包含其它几种有用的属性：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>$loop-&gt;index</code></td>
<td>当前迭代的索引(从 0 开始计数)。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;iteration</code></td>
<td>当前循环迭代 (从 1 开始计算)。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;remaining</code></td>
<td>循环中剩余迭代的数量。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;count</code></td>
<td>被迭代的数组元素的总数。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;first</code></td>
<td>是否为循环的第一次迭代。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;last</code></td>
<td>是否为循环的最后一次迭代。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;even</code></td>
<td>是否是循环中的偶数迭代。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;odd</code></td>
<td>是否是循环中的奇数迭代。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;depth</code></td>
<td>当前迭代的嵌套深度级数。</td>
</tr>
<tr>
<td><code v-pre>$loop-&gt;parent</code></td>
<td>嵌套循环中，父循环的循环变量。</td>
</tr>
</tbody>
</table>
<h3 id="注释" tabindex="-1"><a class="header-anchor" href="#注释"><span>注释</span></a></h3>
<p>Blade 也允许在视图中定义注释。不过与 HTML 注释不同，Blade 注释不会包含在返回给应用的 HTML 中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">--</span> This comment will not be present in the rendered <span class="token constant">HTML</span> <span class="token operator">--</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="php" tabindex="-1"><a class="header-anchor" href="#php"><span>PHP</span></a></h3>
<p>某些情况下，在视图中嵌入 PHP 代码很有用。可以在模板中使用 <code v-pre>@php</code> 指令执行原生的 PHP 代码块：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@php</span>
<span class="line">    <span class="token comment">//</span></span>
<span class="line">@endphp</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>Tip：尽管 Blade 提供了这个特性，但频繁使用意味着模板中嵌入了过多的逻辑。</p>
</blockquote>
<h2 id="表单" tabindex="-1"><a class="header-anchor" href="#表单"><span>表单</span></a></h2>
<h3 id="csrf-域" tabindex="-1"><a class="header-anchor" href="#csrf-域"><span>CSRF 域</span></a></h3>
<p>只要在应用中定义了 HTML 表单，就一定要在表单中包含隐藏的 CSRF 令牌域，这样一来 <a href="https://learnku.com/docs/laravel/laravel/6.x/csrf" target="_blank" rel="noopener noreferrer">CSRF 保护</a> 中间件就能校验请求。可以使用 Blade 的 <code v-pre>@csrf</code> 指令生成令牌域：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>form method<span class="token operator">=</span><span class="token string double-quoted-string">"POST"</span> action<span class="token operator">=</span><span class="token string double-quoted-string">"/profile"</span><span class="token operator">></span></span>
<span class="line">    @csrf</span>
<span class="line"></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="method-域" tabindex="-1"><a class="header-anchor" href="#method-域"><span>Method 域</span></a></h3>
<p>HTML 表单不能发出 <code v-pre>PUT</code>、 <code v-pre>PATCH</code> 及 <code v-pre>DELETE</code> 请求，需要加入隐藏的 <code v-pre>_method</code> 域来模仿这些 HTTP 动词。Blade 的 <code v-pre>@method</code> 指令能够帮你创建这个域：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>form action<span class="token operator">=</span><span class="token string double-quoted-string">"/foo/bar"</span> method<span class="token operator">=</span><span class="token string double-quoted-string">"POST"</span><span class="token operator">></span></span>
<span class="line">    @<span class="token function">method</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'PUT'</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="验证错误" tabindex="-1"><a class="header-anchor" href="#验证错误"><span>验证错误</span></a></h3>
<p><code v-pre>@error</code> 指令可以快速检查 <a href="https://learnku.com/docs/laravel/6.x/validation#quick-displaying-the-validation-errors" target="_blank" rel="noopener noreferrer">验证错误消息</a> 这个属性是否存在. 在 <code v-pre>@error</code> 指令中, 你可以使用 <code v-pre>$message</code> 变量来显示验证错误内容:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">/</span>resources<span class="token operator">/</span>views<span class="token operator">/</span>post<span class="token operator">/</span>create<span class="token operator">.</span>blade<span class="token operator">.</span>php <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>label <span class="token keyword">for</span><span class="token operator">=</span><span class="token string double-quoted-string">"title"</span><span class="token operator">></span>Post Title<span class="token operator">&lt;</span><span class="token operator">/</span>label<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>input id<span class="token operator">=</span><span class="token string double-quoted-string">"title"</span> type<span class="token operator">=</span><span class="token string double-quoted-string">"text"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"@error('title') is-invalid @enderror"</span><span class="token operator">></span></span>
<span class="line"></span>
<span class="line">@<span class="token function">error</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"alert alert-danger"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$message</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line">@enderror</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你也可以指定<a href="https://learnku.com/docs/laravel/6.x/validation#named-error-bags" target="_blank" rel="noopener noreferrer">错误验证字段名字</a> 作为第二个参数传递给 <code v-pre>@error</code> 指令去获取验证错误内容并可以通过多种形式展示在页面上:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">/</span>resources<span class="token operator">/</span>views<span class="token operator">/</span>auth<span class="token operator">.</span>blade<span class="token operator">.</span>php <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>label <span class="token keyword">for</span><span class="token operator">=</span><span class="token string double-quoted-string">"email"</span><span class="token operator">></span>Email address<span class="token operator">&lt;</span><span class="token operator">/</span>label<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>input id<span class="token operator">=</span><span class="token string double-quoted-string">"email"</span> type<span class="token operator">=</span><span class="token string double-quoted-string">"email"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"@error('email', 'login') is-invalid @enderror"</span><span class="token operator">></span></span>
<span class="line"></span>
<span class="line">@<span class="token function">error</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'email'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'login'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string double-quoted-string">"alert alert-danger"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$message</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line">@enderror</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="引入子视图" tabindex="-1"><a class="header-anchor" href="#引入子视图"><span>引入子视图</span></a></h2>
<p>Blade 的 <code v-pre>@include</code> 指令允许你从其它视图中引入 Blade 视图。父视图中所有可用的变量都将在被引入的视图中可用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>div<span class="token operator">></span></span>
<span class="line">    @<span class="token keyword">include</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'shared.errors'</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">    <span class="token operator">&lt;</span>form<span class="token operator">></span></span>
<span class="line">        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> Form Contents <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>被包含的视图不仅会继承父视图的所有可用数据，还能够以数组形式向被包含的视图传递额外数据：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token keyword">include</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'view.name'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'some'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'data'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果传递给 <code v-pre>@include</code> 一个不存在的视图，Laravel 会抛出错误。想要包含一个不能确定存在与否的视图，需要使用 <code v-pre>@includeIf</code> 指令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">includeIf</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'view.name'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'some'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'data'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>想要包含一个依赖于给定布尔条件的视图，可以使用 <code v-pre>@includeWhen</code> 指令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">includeWhen</span><span class="token punctuation">(</span><span class="token variable">$boolean</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'view.name'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'some'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'data'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>要包含给定视图数组中第一个存在的视图，可以使用 <code v-pre>includeFirst</code> 指令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">includeFirst</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'custom.admin'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'admin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'some'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'data'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>注意：应当尽量避免在 Blade 视图中使用 <strong>DIR</strong> 和 <strong>FILE</strong> 魔术常量，因为它们将指向缓存中经过编译的视图的位置。</p>
</blockquote>
<h4 id="给被包含的视图起别名" tabindex="-1"><a class="header-anchor" href="#给被包含的视图起别名"><span>给被包含的视图起别名</span></a></h4>
<p>如果你的 Blade 被包含视图们存储在子目录中，你可能会希望为它们起个易于访问的别名。例如，一个带有如下内容的 Blade 视图内容被存储在 <code v-pre>resources/views/includes/input.blade.php</code> 文件中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string double-quoted-string">"{{ <span class="token interpolation"><span class="token variable">$type</span></span> ?? 'text' }}"</span><span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>可以使用 <code v-pre>include</code> 方法为 <code v-pre>includes.input</code> 起一个叫做 <code v-pre>input</code> 的别名。通常，这会在 <code v-pre>AppServiceProvider</code> 的 <code v-pre>boot</code> 方法中完成：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">include</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'includes.input'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>一旦被包含的视图拥有了别名，就可以像 Blade 指令一样使用别名渲染它：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">input</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'type'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'email'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="为集合渲染视图" tabindex="-1"><a class="header-anchor" href="#为集合渲染视图"><span>为集合渲染视图</span></a></h3>
<p>可以使用 Blade 的 <code v-pre>@each</code> 指令在一行中整合循环和包含：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">each</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'view.name'</span><span class="token punctuation">,</span> <span class="token variable">$jobs</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'job'</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>第一个参数是渲染数组或集合的每个元素的视图片段。第二个参数是希望被迭代的数组或集合，第三个参数则是将被分配给视图中当前迭代的变量名。例如，想要迭代 <code v-pre>jobs</code> 数组，通常会在视图片段中使用 <code v-pre>job</code> 变量访问每个任务。当前迭代的 key 将作为视图片段中的 <code v-pre>key</code> 变量。</p>
<p>也可以向 <code v-pre>@each</code> 指令传递第四个参数。这个参数是当给定数组为空时要渲染的视图片段。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">each</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'view.name'</span><span class="token punctuation">,</span> <span class="token variable">$jobs</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'job'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'view.empty'</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>注意：借助 <code v-pre>@each</code> 渲染视图，无法从父视图中继承变量。如果子视图需要这些变量，就必须使用 <code v-pre>@foreach</code> 和 <code v-pre>@include</code> 代替它。</p>
</blockquote>
<h2 id="堆栈" tabindex="-1"><a class="header-anchor" href="#堆栈"><span>堆栈</span></a></h2>
<p>Blade 允许你将视图压入堆栈，这些视图能够在其它视图或布局中被渲染。这在子视图中指定需要的 JavaScript 库时非常有用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">push</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'scripts'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string double-quoted-string">"/example.js"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></span>
<span class="line">@endpush</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果需要，可以多次压入堆栈。通过向 <code v-pre>@stack</code> 指令传递堆栈名称来完成堆栈内容的渲染：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>head<span class="token operator">></span></span>
<span class="line">    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 头部内容 <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line"></span>
<span class="line">    @<span class="token function">stack</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'scripts'</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果想要将内容预置在栈顶，需要使用 <code v-pre>@prepend</code> 指令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">push</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'scripts'</span><span class="token punctuation">)</span></span>
<span class="line">    This will be second<span class="token operator">...</span></span>
<span class="line">@endpush</span>
<span class="line"></span>
<span class="line"><span class="token comment">// 然后...</span></span>
<span class="line"></span>
<span class="line">@<span class="token function">prepend</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'scripts'</span><span class="token punctuation">)</span></span>
<span class="line">    This will be first<span class="token operator">...</span></span>
<span class="line">@endprepend</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="service-注入" tabindex="-1"><a class="header-anchor" href="#service-注入"><span>Service 注入</span></a></h2>
<p><code v-pre>@inject</code> 指令可以用于自 Laravel 的 <a href="https://learnku.com/docs/laravel/6.x/container" target="_blank" rel="noopener noreferrer">服务容器</a> 中获取服务。传递给 <code v-pre>@inject</code> 的第一个参数是将要置入的服务变量名，第二个参数是希望被解析的类或接口名：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">inject</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'metrics'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'App\Services\MetricsService'</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>div<span class="token operator">></span></span>
<span class="line">    Monthly Revenue<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$metrics</span><span class="token operator">-></span><span class="token function">monthlyRevenue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">.</span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="扩展-blade" tabindex="-1"><a class="header-anchor" href="#扩展-blade"><span>扩展 Blade</span></a></h2>
<p>Blade 允许你使用 <code v-pre>directive</code> 方法自定义指令。当 Blade 编译器遇到自定义指令时，这会调用该指令包含的表达式提供的回调。</p>
<p>下面的例子创建了 <code v-pre>@datetime($var)</code> 指令，一个格式化给定的 <code v-pre>DateTime</code> 的实例 <code v-pre>$var</code>：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Providers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>ServiceProvider</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">AppServiceProvider</span> <span class="token keyword">extends</span> <span class="token class-name">ServiceProvider</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 在容器中注册绑定.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">register</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">//</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 执行注册后引导服务.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'datetime'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$expression</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;?php echo (<span class="token interpolation"><span class="token variable">$expression</span></span>)->format('m/d/Y H:i'); ?>"</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如你所见，我们将在传递给该指令的任意表达式中链式调用 <code v-pre>format</code> 方法。在这个例子中，该指令将生成如下原生 PHP 代码：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span> <span class="token keyword">echo</span> <span class="token punctuation">(</span><span class="token variable">$var</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'m/d/Y H:i'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>注意：在更新Blade 指令的逻辑之后，需要删除 Blade 视图的所有缓存。可以使用 <code v-pre>view:clear</code> Artisan 命令删除 Blade 视图缓存。</p>
</blockquote>
<h3 id="自定义-if-语句" tabindex="-1"><a class="header-anchor" href="#自定义-if-语句"><span>自定义 If 语句</span></a></h3>
<p>在定义简单的、自定义条件语句时，编写自定义指令比必须的步骤复杂。在这种情况下，Blade 提供了 <code v-pre>Blade::if</code> 方法，它允许你使用闭包快速度定义条件指令。例如，定义一个校验当前应用环境的自定义指令，可以在 <code v-pre>AppServiceProvider</code> 的 <code v-pre>boot</code> 方法中这样做：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Blade</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 执行注册后引导服务</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token class-name static-context">Blade</span><span class="token operator">::</span><span class="token function">if</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'env'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$environment</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token function">app</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">environment</span><span class="token punctuation">(</span><span class="token variable">$environment</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>一旦定义了自定义条件指令，就可以在模板中轻松的使用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">env</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'local'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token comment">// 应用在本地环境中运行...</span></span>
<span class="line">@<span class="token function">elseenv</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'testing'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token comment">// 应用在测试环境中运行...</span></span>
<span class="line">@<span class="token keyword">else</span></span>
<span class="line">    <span class="token comment">// 应用没有在本地和测试环境中运行...</span></span>
<span class="line">@endenv</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接<br>
我们的翻译工作遵照 <a href="https://learnku.com/docs/guide/cc4.0/6589" target="_blank" rel="noopener noreferrer">CC 协议</a>，如果我们的工作有侵犯到您的权益，请及时联系我们。</p>
</blockquote>
<hr>
<blockquote>
<p>原文地址：<a href="https://learnku.com/docs/laravel/6.x/blade/5147" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/6.x/bla...</a></p>
<p>译文地址：<a href="https://learnku.com/docs/laravel/6.x/blade/5147" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/6.x/bla...</a></p>
</blockquote>
</div></template>


